<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="请输入项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="项目描述（每一项描述以英文逗号分隔）"
        prop="description"
      >
        <el-input
          v-model="form.description"
          autocomplete="off"
          placeholder="请输入项目描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目链接" prop="url">
        <el-input
          v-model="form.url"
          autocomplete="off"
          placeholder="请输入项目链接"
        ></el-input>
      </el-form-item>
      <el-form-item label="源码地址" prop="github">
        <el-input
          v-model="form.github"
          autocomplete="off"
          placeholder="请输入源码地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="预览图" prop="thumb">
        <Upload v-model="form.thumb" />
      </el-form-item>
      <el-form-item label="排序等级" prop="order">
        <el-select v-model="form.order" placeholder="排序等级">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">发布项目</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { server_URL } from '@/urlConfig'
import Upload from '@/components/Upload'
import { addProject } from '@/api/project'
export default {
  components: { Upload },
  data() {
    return {
      server_URL,
      form: {
        name: '',
        description: '',
        url: '',
        github: '',
        thumb: '',
        order: 1
      },
      rules: {
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '项目描述不能为空', trigger: 'blur' }
        ],
        url: [{ required: true, message: '项目链接不能为空', trigger: 'blur' }],
        github: [
          { required: true, message: '源码链接不能为空', trigger: 'blur' }
        ],
        thumb: [{ required: true, message: '请上传预览图', trigger: 'blur' }],
        order: [{ required: true, message: '请选择排序等级', trigger: 'blur' }]
      }
    }
  },

  methods: {
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const params = { ...this.form }
          params.description = this.form.description.split(',')
          params.order = parseInt(this.form.order)

          await addProject(params)
          this.$message.success('发布成功')
          this.$router.push('/project/project-list')
        }
      })
    },
    handleReset() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style></style>
